<template>
  <div class="app-container">
    <div class="filter-container">
      <#if vueSearchColList??>
        <#list vueSearchColList as col>
      <el-input v-model="param.${col["propertyName"]}" placeholder="请输入${col["propertyChinaName"]}" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
        </#list>
      </#if>
      <#if vueSearchColList??>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="reset">重置</el-button>
      </#if>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleSaveData({})">添加</el-button>
      <el-button v-waves class="filter-item" type="danger" icon="el-icon-delete" @click="tableHandleBatchDelete">批量删除</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <#if vueShowColList??>
        <#list vueShowColList as col>
          <#if col["isUploadCol"]>
      <el-table-column label="${col["propertyChinaName"]}" align="center" width="130px">
        <template slot-scope="{row}">
          <el-image class="table-img" :src="row.${col["propertyName"]}" :preview-src-list="[row.${col["propertyName"]}]"></el-image>
          <el-upload ref="upload"
                     :action="'http://localhost:8001' +moduleUrl + '/upload/' + row.id "
                     :on-success="handleAvatarSuccess"
                     :limit="1"
                     :before-upload="beforeImageUpload"
                     :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </template>
      </el-table-column>
            <#elseif col["showType"] == 'text'>
      <el-table-column label="${col["propertyChinaName"]}" align="center" min-width="150px" prop="${col["propertyName"]}"></el-table-column>
          <#elseif col["showType"] == 'enum'>
      <el-table-column label="${col["propertyChinaName"]}" align="center" width="110px">
        <template slot-scope="{row}">
          <#if updateEnumsLists??>
              <#list tableEnumsEntities as enumCol>
                <#if col["propertyName"] == enumCol["colName"]>
                  <#if enumCol["enumsDTOS"]??>
                    <#list enumCol["enumsDTOS"] as enumCol1>
          <strong v-if="row.${col["propertyName"]} == ${enumCol1["name"]}">${enumCol1["value"]}</strong>
                    </#list>
                  </#if>
                </#if>
              </#list>
          </#if>
        </template>
      </el-table-column>
          </#if>
        </#list>
      </#if>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleSaveData(row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini"  @click="handleTableDelete(row)" icon="el-icon-delete">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="param.current" :limit.sync="param.pageSize" @pagination="getList"/>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
        <#if vueModifyColList??>
        <#list vueModifyColList as col>
        <el-form-item label="${col["propertyChinaName"]}" prop="${col["propertyName"]}">
        <#if col["updateType"] == 'text'>
          <el-input v-model="form.${col["propertyName"]}"/>
          <#elseif col["updateType"] == 'switch'>
          <el-switch
                  v-model="form.${col["propertyName"]}"
                  active-text="开关状态一"
                  inactive-text="开关状态二">
          </el-switch>
          <#elseif col["updateType"] == 'select'>
          <el-select v-model="form.${col["propertyName"]}" placeholder="请初始化下拉选择框数据">
            <#if selectEntities??>
              <#list selectEntities as selectCol>
                  <#if selectCol["propertyName"] == col["propertyName"]>
              <el-option
                      v-for="item in  ${selectCol["className"]}Data"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
              </el-option>
                  </#if>
              </#list>
            </#if>
          </el-select>
        <#elseif col["updateType"] == 'enum'>
          <#if updateEnumsLists??>
        <el-radio-group v-model="form.${col["propertyName"]}">
            <#list updateEnumsLists as enumCol>
                <#if col["propertyName"] == enumCol["colName"]>
                  <#if enumCol["enumsDTOS"]??>
                    <#list enumCol["enumsDTOS"] as enumCol1>
            <el-radio :label="${enumCol1["name"]}">${enumCol1["value"]}</el-radio>
                    </#list>
                  </#if>
                </#if>
            </#list>
        </el-radio-group>
          </#if>
        <#elseif col["updateType"] == 'number'>
        <el-input-number v-model="form.${col["propertyName"]}" :min="1" :max="100" ></el-input-number>
        <#elseif col["updateType"] == 'date'>
        <el-date-picker
                v-model="form.${col["propertyName"]}"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择日期">
        </el-date-picker>
        <#elseif col["updateType"] == 'textArea'>
        <el-input type="textarea"  v-model="form.${col["propertyName"]}"></el-input>
        </#if>
        </el-form-item>
        </#list>
        </#if>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTableForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import Pagination from '@/components/Pagination'
  import {tableUtil} from '../../utils/tableUtil';
  import { batchDelete, page, saveData<#if selectEntities??><#list selectEntities as col>,get${col['className']}SelectData</#list></#if>} from '@/api/${unClassName}/index'
  export default {
    name: '${unClassName}',
    components: { Pagination },
    directives: { waves },
    mixins: [tableUtil],
    data() {
      return {
        moduleUrl: '/${unClassName}',
        param: { // 列表查询参数
          current: 1,
          pageSize: 5,
          <#if vueSearchColList??>
            <#list vueSearchColList as col>
          ${col["propertyName"]}: undefined,
            </#list>
          </#if>
        },
        form: { // 添加或修改提交表单
        <#if showColList??>
        <#list showColList as col>
          <#if col["propertyName"] != 'createTime' && col["propertyName"] != 'updateTime'>
        ${col["propertyName"]}: undefined,
          </#if>
        </#list>
        </#if>
        },
        rules: { // 自定义校验规则
          <#if vueModifyColList??>
          <#list vueModifyColList as col>
          <#if col["propertyName"] != 'createTime' && col["propertyName"] != 'updateTime'>
          ${col["propertyName"]}: [{ required: true, message: '${col["propertyChinaName"]}为必须项~', trigger: 'blur' }],
          </#if>
          </#list>
          </#if>
        },
        <#if selectEntities??>
        <#list selectEntities as col>
        ${col["className"]}Data:[],
        </#list>
        </#if>
      }
    },
    created() {
      this.getList()
      <#if selectEntities??>
      <#list selectEntities as col>
      this.get${col["className"]}Data()
      </#list>
      </#if>
    },
    methods: {
      getList() { // 表格数据分页获取
        this.listLoading = true
        page(this.param).then(res => {
          this.list = res.data.records
          this.total = res.data.total
          this.listLoading = false
        })
      },
      submitTableForm(){this.submitForm(saveData)},
      handleTableDelete(row){this.handleDelete(row,batchDelete)},
      tableHandleBatchDelete(){this.tableBatchDelete(batchDelete)},
      <#if selectEntities??>
      <#list selectEntities as col>
      get${col["className"]}Data(){
        let that = this
        get${col['className']}SelectData().then(res => {
          that.${col["className"]}Data = res.data
        })
      },
      </#list>
      </#if>
    }
  }
</script>
